<!DOCTYPE html>
<html>
<head>
	<title>播放页面</title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/public.css">
	<style>
		.box-opacity {
			background-color: #aaaaaa;
			position: relative;
		}
		.toast {
			width: 460px;
			height: 720px;
		   	opacity: 0.8;
		   	position: absolute;
		    right: 0;
		   	background-color: #000000;
		}
		.top-swiper {
			width: 100%;
			height: 224px;
		}
		.bottom-content {
			width: 100%;
			height: 496px;
		}
		.left-content {
			width: 50%;
			height: 100%;
			float: left;
		}
		.image-bg {
			width: 183px;
			height: 358px;
			margin-top: 70px;
			margin-left: 44px;
			text-align: center;
			position: relative;
		}
		.image-icon {
			position: absolute;
			top: 24px;
			left: 76.5px;
		}
		.image-wz1 {
			position: absolute;
			top: 64px;
			left: 59px;
		}
		.image-wz2 {
			position: absolute;
			top: 100px;
			left: 38.5px;
		}
		.image-wz3 {
			position: absolute;
			top: 136px;
			left: 38.5px;
		}
		.image-wz4 {
			position: absolute;
			top: 172px;
			left: 38.5px;
		}
		.image-wz5 {
			position: absolute;
			top: 208px;
			left: 38.5px;
		}
		.image-wz6 {
			position: absolute;
			top: 244px;
			left: 38.5px;
		}
		.image-wz7 {
			position: absolute;
			bottom: 14px;
			left: 40px;
		}
		.right-content {
			width: 50%;
			height: 100%;
			float: left;
		}
		.img-ewm {
			margin-top: 142px;
			margin-left: 31.5px;
		}
		.img-wxzf {
			margin-top: 20px;
			margin-left: 41px;
			float: left;
		}
		.img-zfbzf {
			margin-top: 20px;
			margin-left: 50px;
			float: left;
		}
		#p10{
			background: url("../images/payLookBack/bg.png");
		}
	    .img-wz {
			margin-top: 8px;
			margin-right:28px;
			float: right;
		}
		/*轮播图*/
		      body,div,ul,li,a,img{margin: 0;padding: 0;}
			  ul,li{list-style: none;}
			  a{text-decoration: none;}
			 
			  #wrapper{position: relative;margin: 0px auto;width: 460px;height: 180px;}
			  #banner{position:relative;width: 460px;height: 180px;overflow: hidden;}
			  .imgList{position:relative;width:20000px;height:180px;z-index: 10;overflow: hidden;}
			  .imgList li{float:left;display: inline;}
			  #prev,
			  #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
			  #prev{left: 10px;}
			  #next{right: 10px;}
			  #prev:hover,
			  #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
			  .bg{position: absolute;bottom: 0;width: 460px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
			  .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
			  .infoList li{display: none;}
			  .infoList .infoOn{display: inline;color: white;}
			  .indexList{position: absolute;right: 23px;margin-top: 33px;z-index: 30;}
			  .indexList li{float: left;margin-right:5px;background:#ffffff;width: 10px;height:10px;border-radius: 50%;}
			  .indexList .indexOn{background: red;font-weight: bold;color: white;}
	</style>
</head>
<body>
<div id="p10" class="box box-opacity" tabindex="-1">	
	<div class="toast">
	 	<div class="top-swiper">
	 		<div class="top-swiper">
	 		<div id="wrapper"><!-- 最外层部分 -->
			    <div id="banner"><!-- 轮播部分 -->
			      <ul class="imgList"><!-- 图片部分 -->
			      <li><a href="#"><img src="../images/home/tu_1.png" width="460px" height="180px" alt="puss in boots1"></a></li>
			      <li><a href="#"><img src="../images/home/tu_2.png" width="460px" height="180px" alt="puss in boots2"></a></li>
			      <li><a href="#"><img src="../images/home/tu_3.png" width="460px" height="180px" alt="puss in boots3"></a></li>
			      <li><a href="#"><img src="../images/home/tu_4.png" width="460px" height="180px" alt="puss in boots4"></a></li>
			      <li><a href="#"><img src="../images/home/tu_5.png" width="460px" height="180px" alt="puss in boots5"></a></li>
			      </ul>
			    </div>
			</div>
			<img src="../images/payLookBack/wz.png" class="img-wz">
			<ul class="indexList">
			        <li class="indexOn"></li>
			        <li></li>
			        <li></li>
			        <li></li>
			        <li></li>
			</ul>
	 	</div>
	 	<div class="bottom-content">
	 		<div class="left-content">
	 			<div class="image-bg">
	 				<img src="../images/payLookBack/pic.png">
	 				<img src="../images/payLookBack/icon.png" class="image-icon">
	 				<img src="../images/payLookBack/wz1.png" class="image-wz1">
	 				<img src="../images/payLookBack/wz2.png" class="image-wz2">
	 				<img src="../images/payLookBack/wz3.png" class="image-wz3">
	 				<img src="../images/payLookBack/wz4.png" class="image-wz4">
	 				<img src="../images/payLookBack/wz5.png" class="image-wz5">
	 				<img src="../images/payLookBack/wz6.png" class="image-wz6">
	 				<img src="../images/payLookBack/wz7.png" class="image-wz7">
	 			</div>
	 		</div>
	 		<div class="right-content">
	 				<img src="../images/payLookBack/ewm.png" class="img-ewm">
	 				<img src="../images/payLookBack/wxzf.png" class="img-wxzf">
	 				<img src="../images/payLookBack/zfbzf.png" class="img-zfbzf">
	 		</div>
	 	</div>
	</div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/public.js"></script>
<script type="text/javascript">
  var curIndex = 0, //当前index
      imgLen = $(".imgList li").length; //图片总数
     // 定时器自动变换2.5秒每次
  var autoChange = setInterval(function(){ 
    if(curIndex < imgLen-1){ 
      curIndex ++; 
    }else{ 
      curIndex = 0;
    }
    //调用变换处理函数
    changeTo(curIndex); 
  },2500);
   //左箭头滑入滑出事件处理
  $("#prev").hover(function(){ 
    //滑入清除定时器
    clearInterval(autoChange);
  },function(){ 
    //滑出则重置定时器
    autoChangeAgain();
  });
  //左箭头点击处理
  $("#prev").click(function(){ 
    //根据curIndex进行上一个图片处理
    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
    changeTo(curIndex);
  });
  //右箭头滑入滑出事件处理
  $("#next").hover(function(){ 
    //滑入清除定时器
    clearInterval(autoChange);
  },function(){ 
    //滑出则重置定时器
    autoChangeAgain();
  });
  //右箭头点击处理
  $("#next").click(function(){ 
    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
    changeTo(curIndex);
  });
  //对右下角按钮index进行事件绑定处理等
  $(".indexList").find("li").each(function(item){ 
    $(this).hover(function(){ 
      clearInterval(autoChange);
      changeTo(item);
      curIndex = item;
    },function(){ 
      autoChangeAgain();
    });
  });
  //清除定时器时候的重置定时器--封装
  function autoChangeAgain(){ 
      autoChange = setInterval(function(){ 
      if(curIndex < imgLen-1){ 
        curIndex ++;
      }else{ 
        curIndex = 0;
      }
    //调用变换处理函数
      changeTo(curIndex); 
    },2500);
    }
  function changeTo(num){ 
    var goLeft = num * 460;
    $(".imgList").animate({left: "-" + goLeft + "px"},500);
    $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
    $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
  }
  </script>
</body>
</html>